<!--
 * @Descripttion: 密码登录页面
 * @version: 1.0.0
 * @Author: System
 * @Date: 2025-01-10
 * @LastEditTime: 2025-01-10
 * @LastEditors: System
-->
<template>
  <view class="login">
    <!-- 自定义导航栏 -->
    <custom-navbar title="密码登录" />

    <image src="@/static/images/my/avatar_default.png" class="logo" />

    <view class="item d-flex align-items-center">
      <view class="base-icons shouji-icon"></view>
      <view class="input">
        <input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号" />
      </view>
    </view>

    <view class="item d-flex align-items-center">
      <view class="base-icons mima-icon"></view>
      <view class="input">
        <input type="password" v-model="password" maxlength="20" placeholder="请输入密码" />
      </view>
    </view>

    <view class="forgot-password" @click="handleForgotPassword">
      <text>忘记密码？使用验证码登录</text>
    </view>

    <view class="agreement d-flex align-items-center" @click="handleAgree">
      <view class="icon">
        <view class="base-icons gouxuan-icon" v-if="agree"></view>
        <view class="base-icons weixuan-icon" v-else></view>
      </view>
      <view class="t1" @click="$emit('handleAgree')">请认真阅读并勾选</view>
      <view class="t2" @click="uniRouter.navigateTo('/pages/article/info?id=100010')">《隐私协议》</view>
      <view class="t1">和</view>
      <view class="t2" @click="uniRouter.navigateTo('/pages/article/info?id=100009')">《用户协议》</view>
    </view>
    
    <view class="btn" @click="login">登录</view>
    
    <view class="switch-login" @click="handleSwitchLogin">
      <text>使用验证码登录</text>
    </view>
  </view>
</template>

<script>
import { passwordLogin } from '@/api';
import WeValidator from 'we-validator'

export default {
  name: "PasswordLogin",
  data() {
    return {
      to_from: "",
      phone: "",
      password: "",
      agree: null,
      validatorInstance: null
    }
  },
  methods: {
    handleAgree() {
      this.agree = this.agree ? null : true
    },
    handleForgotPassword() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
    handleSwitchLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
    async login() {
      if (!this.agree) {
        uni.showToast({
          title: '请同意用户协议',
          icon: 'none'
        })
        return;
      }
      
      const payload = {
        phone: this.phone,
        password: this.password,
      }
      
      if (!this.validatorInstance.checkData(payload)) return;
      
      uni.showLoading({
        title: '登录中...',
        mask: true
      })
      
      try {
        const result = await passwordLogin(payload);
        uni.hideLoading()
        
        if (result.code == 200) {
          this.$store.dispatch('user/userLogin', result.data)
          this.checkGo();
        } else {
          uni.showToast({
            title: result.msg || '登录失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      }
    },
    initValidator() {
      this.validatorInstance = new WeValidator({
        rules: {
          phone: {
            required: true,
            mobile: true
          },
          password: {
            required: true,
            minlength: 6
          }
        },
        messages: {
          phone: {
            required: '手机号码不能为空',
            mobile: '请输入正确的手机号码'
          },
          password: {
            required: '密码不能为空',
            minlength: '密码长度不正确'
          }
        }
      });
    },
    checkGo() {
      const pages = getCurrentPages()
      if (this.to_from) {
        uni.redirectTo({ url: this.to_from })
      } else {
        if (pages.length > 1) {
          uni.navigateBack({ delta: 2 })
        } else {
          uni.switchTab({ url: `/pages/user/index` })
        }
      }
    },
  },
  mounted() {
    this.initValidator()
    this.to_from = this.$route.query.to_from
  },
}
</script>

<style lang="scss">
.login {
  height: 100vh;
  padding: 0 64rpx;
  overflow: hidden;
  background-color: #fff;

  .logo {
    display: block;
    width: 192rpx;
    height: 194rpx;
    margin: 160rpx auto 56rpx;
  }

  .btn {
    margin: 32rpx auto 0;
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 50rpx;
    font-size: var(--hui-font-size-32);
    display: block;
    background-color: var(--hui-color-primary);
    text-align: center;
    color: #fff;
  }

  .forgot-password {
    margin-top: 24rpx;
    text-align: right;
    font-size: var(--hui-font-size-26);
    color: var(--hui-color-primary);
  }

  .switch-login {
    margin-top: 32rpx;
    text-align: center;
    font-size: var(--hui-font-size-28);
    color: var(--hui-color-primary);
  }

  .agreement {
    font-size: var(--hui-font-size-26);
    color: #A8A8A8;
    margin: 80rpx 0 0 0;

    .base-icons {
      margin-right: 10rpx;
    }

    .t1 {
      color: #A8A8A8;
      padding: 0 5rpx;
    }

    .t2 {
      color: var(--hui-color-primary);
      font-weight: 500;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
    }
  }

  .item {
    margin: 24rpx 0 0 0;
    border-radius: 50rpx;
    background-color: #f7f7f7;
    height: 96rpx;

    .base-icons {
      margin: 0 12rpx 0 32rpx;
    }

    .input {
      flex: 1;
      outline: none;
      font-size: 32rpx;
      color: #333;
    }
  }
}
</style>
